<template>
  <div class="connect">
    <div class="connect_box">
      <div>
         <el-button type="primary" @click="changeSHowType">{{$t('UserInfo.expand_all')}}</el-button>
         <!-- <el-button @click="rouleShow('addone' , '')" type="primary">新增一级菜单</el-button> -->
      </div>
       <el-table v-if="tableshow" :data="menuList" style="width: 100%;margin-bottom: 20px;" row-key="id" border :default-expand-all="default_expand_all" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <!-- <el-table-column prop="id" label="ID"  align="center" min-width="80"></el-table-column> -->
          <el-table-column prop="title" :label="$t('public.designation')"  align="center" min-width="180">
            <template slot-scope="{row}">
                  {{$t('route.'+row.meta.title)}}
            </template>
          </el-table-column>
          <el-table-column prop="component" :label="$t('public.route')"  align="center" min-width="180"></el-table-column>
          <el-table-column prop="orderNum" :label="$t('public.rank')"  align="center" min-width="180">
            <template slot-scope="scope">
                  <el-input style="width: 50%;" v-model="scope.row.orderNum"  @keyup.enter.native="switchChange(scope.row)" type="number" ></el-input>
                  <el-button @click="switchChange(scope.row)" type="text">{{$t('public.verify')}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="orderNum" :label="$t('public.shortcut_menu')"  align="center" min-width="180">
            <template slot-scope="{row}">
                  <el-switch
                  v-if="row.parent!=0"
                  @change = "switchChange(row)"
                    v-model="row.shortcut"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                  </el-switch>
            </template>
          </el-table-column>
        </el-table>
        <!-- 修改菜单权限弹出层 -->
        <el-dialog :title="title" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
          <el-form :model="roule_form" :rules="rules" ref="roule_form" label-width="100px" class="demo-ruleForm">
            <el-form-item label="菜单名称" prop="title">
              <el-input disabled v-model="roule_form.title"></el-input>
            </el-form-item>
            <el-form-item label="路径" :prop="roule_form.parent==0?'':'path'">
              <el-input :disabled="roule_form.parent==0?true:false" v-model="roule_form.path"></el-input>
            </el-form-item>
            <el-form-item label="排序" prop="orderNum">
              <el-input v-model="roule_form.orderNum"></el-input>
            </el-form-item>
            <el-form-item label="快捷菜单" prop="name">
              <el-radio v-model="roule_form.shortcut" :label="1">是</el-radio>
                <el-radio v-model="roule_form.shortcut" :label="0">否</el-radio>
            </el-form-item>
            <el-form-item label="metaTitle" prop="orderNum">
              <el-input v-model="roule_form.orderNum"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('roule_form')">立即创建</el-button>
              <el-button @click="resetForm('roule_form')">重置</el-button>
            </el-form-item>
          </el-form>

        </el-dialog>

    </div>
  </div>
</template>

<script>
  import {
    menu_list,
    menu_info,
    menu_update,
    menu_save
  } from '@/api/wqzApi'
  export default {
    components: {

      },
    data() {
      return {
        tableshow:true,
        addType:null, // 表单提交方式 0编辑 1一级分类 2 新增子集
        roule_form:{

        },
        rules:{
          title: [
            { required: true, message: '请输入菜单名称', trigger: 'blur' },
          ],
          path: [
            { required: true, message: '请输入菜单路径', trigger: 'blur' },
          ],
          orderNum: [
            { required: true, message: '请输入菜单排序', trigger: 'blur' },
          ],
        },//表单验证
        dialogVisible:false,
        default_expand_all:true,
        title:'',
        menuList:[],
      }
    },

    created() {
    },
    mounted() {
      this.getList()
    },
    destroyed() {

    },
    methods: {
      getList(){
        menu_list({}).then(res=>{
          this.menuList = res.menuList
        })
      },
      switchChange(item){
        var data = {
          id:item.id ,
          shortcut:item.shortcut,//是否快捷菜单
          sort:item.orderNum //排序
        }
        menu_update(data).then(res=>{
          console.log(res , '返回信息')
          this.getList({})
          // location.reload()
        }).catch(err=>{
          console.log(err , '报错信息')
        })

      },
      changeSHowType(){
        console.log('queren1')
        this.tableshow = false
        this.default_expand_all = !this.default_expand_all
        setTimeout(()=>{
          this.tableshow = true
        },5)


      },
      handleClose(){
        this.dialogVisible = !this.dialogVisible
      },
      rouleShow(type , id){
        if(type == 'edit'){
          this.title = '修改菜单权限'
          this.addType = 0
          menu_info({menuId:Number(id)}).then(res=>{
            console.log(res , '菜单详情')
            this.roule_form = res.menu
            this.dialogVisible = !this.dialogVisible
          })
        }
        if(type=='addone'){
          this.addType = 1
          this.roule_form = {
            "orderNum": null,
            "path":'',
            "parent": 0,
            "perms": "",
            "shortcut": 0,
            "title": "",
            "type": 1
          }
          console.log('新增一级菜单')
          this.dialogVisible = !this.dialogVisible
        }
        if(type == 'addother'){
          this.addType = 2
          this.roule_form = {
            "orderNum": null,
            "path":'',
            "parent": id,
            "perms": "",
            "shortcut": 0,
            "title": "",
            "type": 1
          }
          console.log('新增一级菜单')
          this.dialogVisible = !this.dialogVisible
        }


      },
       submitForm(formName) {
              this.$refs[formName].validate((valid) => {
                if (valid) {
                  if(this.addType == 0){
                    // 信息编辑
                    menu_update().then(res=>{
                      console.log(res , '返回信息')
                    }).catch(err=>{
                      console.log(err , '报错信息')
                    })
                  }
                  if(this.addType == 1){
                    // 添加一级分类
                    console.log('一级分类',this.roule_form)
                    menu_save(this.roule_form).then(res=>{
                        this.dialogVisible = !this.dialogVisible
                    })

                  }
                  if(this.addType == 2){
                    // 添加一级分类
                    console.log('新增分类',this.roule_form)
                    menu_save(this.roule_form).then(res=>{
                        this.dialogVisible = !this.dialogVisible
                    })
                  }

                } else {
                  console.log('error submit!!');
                  return false;
                }
              });
            },

    }
  }
</script>

<style scoped>
  .connect_box{
    background-color: #fff;
    padding: 1%;
  }
</style>
